<template>
  <footer>
    <div class="app-footer">
      <div v-for="(item, index) of list" :key="index">
        <i :style="{backgroundImage: item.icon}"></i>
        <span>{{ item.label }}</span>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          icon: 'url()',
          label: '首页'
        },
        {
          icon: 'url()',
          label: '分类'
        },
        {
          icon: 'url()',
          label: '购物车'
        },
        {
          icon: 'url()',
          label: '我的'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/style.scss';
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 52px;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 3px 14px 2px rgba(0,0,0,.12);
    .app-footer {
      display: flex;
      align-items: center;
      font-size: .22rem;
      div {
        flex: 1;
        text-align: center;
        i {
          margin: 0 auto;
          width: .4rem;
          height: .4rem;
          @include icon('');
        }
      }
    }
    
  }
</style>
